<template>
  <div>
    <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.0/skins/default/aliplayer-min.css"/>
    <script type="text/javascript" charset="utf-8"
            src="https://g.alicdn.com/de/prismplayer/2.8.0/aliplayer-min.js"></script>
    <!-- 请下载之后使用 -->
<!--    <script type="text/javascript" charset="utf-8" src="/static/js/aliplayercomponents-1.0.5.min.js"></script>-->
    <div class="prism-player" id="player-con"></div>
    <script type="text/template" id="endPreviewTemplate">
      <div class="vip_limit_content">
        <div class="vip_limit_wrap">
          <p class="title">Purchase Full Version</p>
          <div class="vip_limit_button_box">
            <a class="vip_limit_btn">Become VIP</a>
          </div>
          <div class="vip_limit_close"><span class="vip_limit_close_btn">x</span></div>
        </div>
      </div>
    </script>
  </div>
</template>

<script>
  import vod from "@/api/vod"

  export default {
    layout: 'video',
    mounted() {
      console.log(999999999999)
      console.log(this.playAuth)
      console.log(this.id)

      var player = new Aliplayer({
          "id": "player-con",
          "vid": this.vid,
          "playauth": this.playAuth,
          "qualitySort": "asc",
          "format": "mp4",
          "mediaType": "video",
          "width": "100%",
          "height": "500px",
          "autoplay": false,
          "isLive": false,
          "rePlay": false,
          "playsinline": true,
          "preload": false,
          "language": "zh-cn",
          "controlBarVisibility": "hover",
          "useH5Prism": true,
         /* components: [{
            name: 'PreviewVodComponent',
            type: AliPlayerComponent.PreviewVodComponent,
            /!**
             * The preview component has these parameters: previewDuration, previewEndHtml, and previewBarHtml.
             * previewDuration: The length of the preview, in seconds. If you want to disable preview, set this parameter to 0. Make sure that it is set to 0 after the audience purchases the video or becomes a VIP.
             * previewEndHtml: The string shown in the middle of the player after the preview is over. The default is null.
             * previewBarHtml: The string shown in the lower-left corner of the player after the preview is over. The default is null.
             * Note 1: The previewEndHtml and previewBarHtml parameters can be set in the same way as the previewEndHtml parameter in the sample code. You can set the type of a script tag to text/x-template, and then set the previewEndHtml parameter to the ID of the script tag. You can also pass strings to both parameters in the same way as the previewBarHtml parameter in the sample code.
             * Note 2: You can also set a DOM string to the previewEndHtml and previewBarHtml parameters. We recommend that you use ES6 template strings.
             *!/
            args: [60, '#endPreviewTemplate', `<a href="https://www.aliyun.com/product/vod" class="vip-join">开通会员</a> 观看完整视频`]
          }]*/
        }, function (player) {
          console.log("播放器创建了。");

          /* You can register a click event with the custom DOM string to trigger an action, for example, to pop up a dialog box for VIP registration. */
          /*var vip_limit_btn = document.querySelector('.vip_limit_btn')
          vip_limit_btn.addEventListener('click', function () {
            confirm('确认开通会员吗?')
          })

          var close_btn = document.querySelector('.vip_limit_close_btn')
          close_btn.addEventListener('click', function () {
            /!* Call the closePreviewLayer method to close the dialog box *!/
            player.getComponent('PreviewVodComponent').closePreviewLayer()
          })*/
        }
      );
    },
    asyncData({params, error}) {
      return vod.getPlayAuth(params.vid).then(response => {
        console.log(params.vid)
        console.log(response.data);
        //   require('~/assets/js/aliplayer-min.js')
        //已经拿到playAuth
        return {
          playAuth: response.data.playAuth,
          vid: params.vid
          // chapterList: response.data.data.chapterList
        }
      })
    }
  }
</script>

<style scoped>
  .prism-player .prism-cover {
    background-color: none;
    display: block;
  }

  .prism-player .prism-marker-text {
    display: none;
  }

  .vip-join {
    color: #00c1de;
  }

  .vip_limit_content {
    display: flex;
    width: 100%;
    height: 100%;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }

  .vip_limit_content .title {
    font-size: 18px;
    line-height: 36px;
    color: #fff;
    text-align: center;
    width: 100%;
  }

  .vip_limit_button_box {
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
  }

  .vip_limit_btn {
    display: inline-block;
    min-width: 100px;
    position: relative;
    background: #f60;
    padding: 0 35px;
    margin: 0px 5px 20px 5px;
    border-radius: 38px;
    font-size: 18px;
    line-height: 38px;
    color: #623A0C;
    text-align: center;
    background-image: linear-gradient(-135deg, #FBE8A8 0%, #F8E7AC 15%, #E2C078 100%);
    cursor: pointer;
  }

  .vip_limit_close {
    text-align: center;
  }

  .vip_limit_close span {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 36px;
    background: rgba(165, 165, 165, 0.54);
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
  }
</style>
